import { observer, useLocalObservable } from 'mobx-react'
import React, { useState, useEffect } from 'react'
import styles from './index.module.less'
import Store from './store'
import { useLocation } from 'umi'
import Progressbar from '@/components/ProgressBar'
import { Toast } from 'antd-mobile'
import LevelSwiper from '@/components/LevelSwiper'
import ShowModal from './components/ShowModal'
import badge from '@/resource/level/badge.png'
import { useHistory } from 'umi'
import type { levelListType } from './interface'
import { api } from '@/servers/api'
import { getData } from '@/servers/http'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { currentIdx, isSubmitValue } = store
    const history = useHistory()
    const [progressBarValue, setProgressBarValue] = useState(0)
    const showToast = () => {
        Toast.show({
            content: '暂未开放，敬请期待',
        })
    }
    //判断是否全部完成
    const isAllPlay = () => {
        let arr = store.levelList && store.levelList.filter((item: levelListType) => item.is_player === '0')
        if (arr.length) {
            return true
        } else {
            return false
        }
    }

    const [visible, setVisible] = useState(isAllPlay())
    const [isFinish, setIsFinish] = useState<string>('')
    const { id } = useLocation().query

    /** 判断是否有档案记录 */
    const getIsRecord = () => {
        getData(api.userBarriersIsMyRecord).then((res: any) => {
            const { data, status } = res
            if (status !== 200) return
            setIsFinish(data.is_finish)
        })
    }

    useEffect(() => {
        store.getLevelListData(id)
        getIsRecord()
        // eslint-disable-next-line react-hooks/exhaustive-deps
        console.log(isSubmitValue)
    }, [])

    useEffect(() => {
        setProgressBarValue(currentIdx)
        console.log(isSubmitValue)
    }, [currentIdx])

    if (!store.levelList.length) {
        return null
    }

    /**
     * 返回首页
     */
    const goHome = () => {
        // window?.wx?.miniProgram?.navigateBack()
        history.replace('/scene')
    }

    return (
        <div className={styles.page}>
            <ShowModal name={store.levelList[0] && store.levelList[0].barrierScene.name} type={1} imgUrl={badge} visible={visible} setVisible={setVisible} />
            <div className={styles.title}>
                <div />
                <div>{store.levelList[0] && store.levelList[0].barrierScene.name}</div>
                <div />
            </div>
            <div onClick={goHome} className={styles.go_home} />
            <Progressbar Data={store.levelList} currentIndex={progressBarValue} />
            <LevelSwiper renderData={store.levelList} getSwiperValue={setProgressBarValue} isSubmitTraining={store.isSubmitTraining} value={progressBarValue} id={id} />
            {/* <div className={styles.footer}>
                {isFinish === '1' ? ( */}
            {/* <div className={styles.left_view} onClick={() => history.push('/archives')}>
                <div className={styles.my_file}>我的档案</div>
            </div> */}
            {/* ) : (
                    <div />
                )}

                <div className={styles.right_view} onClick={showToast}>
                    <div className={styles.badge}>成就徽章</div>
                </div>
            </div> */}
        </div>
    )
})
